<template>
  <el-dialog width="85%" class="WholeScroll" :visible.sync="formShow" @close="handleClickDeal('cancel')" v-dialog-drag :modal-append-to-body="false" :close-on-click-modal="false" append-to-body>
    <span slot="title">
      <i class="iconfont icon-gou"></i>
      <span>{{ title }}</span>
    </span>
    <div class="detail-box">
      <el-tabs v-model="activeName" style="width:100%;">
        <el-tab-pane label="基本信息" name="first" class="first-tab">
          <cmsDetailRowFile :tableFileList="files" :showTable="showRowTable"></cmsDetailRowFile>
          <div class="content-box">
            <div class="left-box WholeScroll">
              <p :class="{ active: activeIndex == index }" @click="changeTab(index)" v-for="(item, index) in tabs" :key="index">{{ item }}</p>
            </div>
            <div class="right-box WholeScroll">
              <!-- 督办内容 -->
              <el-form :model="formBaseData" ref="formBaseData" :rules="formBaseRules">
                <div v-show="activeIndex == 0">
                  <el-row>
                    <!-- <el-col :span="11">
                      <el-form-item label="关联现场初步审查">
                        <el-select class="form-input" v-model="formBaseData.onSiteReviewId" @change="selectOnSiteReview" filterable :disabled="detailType === 'check' || detailType === 'approve'" placeholder="请选择">
                          <el-option v-for="item in selectList.relevancyTentativeList" :key="item.id" :label="item.preliminaryReviewNumber" :value="item.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col> -->
                    <el-col :span="24">
                      <el-form-item label="提出单位" prop="proposeCompany">
                        <el-select class="form-input" v-model="formBaseData.proposeCompany" filterable :disabled="showCompany || detailType === 'check' || detailType === 'approve'" placeholder="请选择">
                          <el-option v-for="item in selectList.putUnitList" :key="item.id" :label="item.fullname" :value="item.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="变更编号" prop="changeCode">
                        <el-input v-model="formBaseData.changeCode" :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item label="里程桩号（部位）" prop="mileageStakeNum">
                        <el-input v-model="formBaseData.mileageStakeNum" :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="变更等级" prop="changeLevel">
                        <el-select class="form-input" v-model="formBaseData.changeLevel" filterable :disabled="detailType === 'check' || detailType === 'approve'" placeholder="请选择">
                          <el-option v-for="item in selectList.changeLevelArr" :key="item.id" :label="item.name" :value="item.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item label="提出日期" prop="proposeDate">
                        <el-date-picker value-format="yyyy-MM-dd" class="form-input" v-model="formBaseData.proposeDate" type="date" :disabled="detailType === 'check' || detailType === 'approve'" placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="变更名称" prop="changeName">
                        <el-input v-model="formBaseData.changeName" placeholder="请输入变更名称" :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="变更内容" prop="changeContent">
                        <el-input v-model="formBaseData.changeContent" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="设计变更理由" prop="reason">
                        <el-input v-model="formBaseData.reason" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="原施工图设计" prop="oldDesign">
                        <el-input v-model="formBaseData.oldDesign" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="变更施工图设计" prop="changeDesign">
                        <el-input v-model="formBaseData.changeDesign" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" :disabled="detailType === 'check' || detailType === 'approve'"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="是否集团审查" prop="ifGroup" v-if="taskDefKey == 'UserTask_0d8uf11' || taskDefKey == 'UserTask_0ol2nww' || taskDefKey == 'UserTask_18eci7x' || formBaseData.ifGroup">
                        <el-select class="form-input" v-model="formBaseData.ifGroup" filterable :disabled="detailType === 'check' || (detailType === 'approve' && taskDefKey != 'UserTask_0d8uf11')" placeholder="请选择">
                          <el-option v-for="item in selectList.chooseList" :key="item.value" :label="item.name" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item label="集团评审时间" prop="groupApproveDate" v-if="formBaseData.ifGroup == '1'">
                        <el-date-picker value-format="yyyy-MM-dd" class="form-input" v-model="formBaseData.groupApproveDate" type="date" :disabled="detailType === 'check' || (detailType === 'approve' && taskDefKey != 'UserTask_0d8uf11')" placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="是否主管部门审查" prop="ifManagerDept" v-if="formBaseData.ifGroup == '1'">
                        <el-select class="form-input" v-model="formBaseData.ifManagerDept" filterable :disabled="detailType === 'check' || (detailType === 'approve' && taskDefKey != 'UserTask_0d8uf11')" placeholder="请选择">
                          <el-option v-for="item in selectList.chooseList" :key="item.value" :label="item.name" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item label="主管部门名称" prop="managerDeptName" v-if="formBaseData.ifGroup == '1'">
                        <el-input v-model="formBaseData.managerDeptName" :disabled="detailType === 'check' || (detailType === 'approve' && taskDefKey != 'UserTask_0d8uf11')"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="主管部门申请时间" prop="managerDeptApplyDate" v-if="formBaseData.ifGroup == '1'">
                        <el-date-picker value-format="yyyy-MM-dd" class="form-input" v-model="formBaseData.managerDeptApplyDate" type="date" :disabled="detailType === 'check' || (detailType === 'approve' && taskDefKey != 'UserTask_0d8uf11')" placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item label="主管部门评审时间" prop="managerDeptApproveDate" v-if="formBaseData.ifGroup == '1'">
                        <el-date-picker value-format="yyyy-MM-dd" class="form-input" v-model="formBaseData.managerDeptApproveDate" type="date" :disabled="detailType === 'check' || (detailType === 'approve' && taskDefKey != 'UserTask_0d8uf11')" placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row v-if="checkOpinionShow">
                    <el-col :span="24">
                      <el-form-item label="审查意见" prop="checkOpinion">
                        <el-input v-model="formBaseData.checkOpinion" type="textarea" :disabled="detailType === 'check' || taskDefKey !='UserTask_1kc9b8v'" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24" v-if="opinionShow">
                      <el-form-item label="设计变更领导小组审查意见" prop="opinion">
                        <el-input v-model="formBaseData.opinion" type="textarea" :disabled="detailType === 'check' || taskDefKey !='UserTask_1nyy38m'" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                <div v-show="activeIndex == 1">
                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="工程类型" prop="engineeringType">
                        <el-select style="width: 100%;" v-model="formBaseData.engineeringType" :disabled="detailType === 'check' || detailType === 'approve'" clearable placeholder="请选择">
                          <el-option v-for="item in selectList.projectType" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item label="变更金额" prop="changeAmount">
                        <el-input v-model="formBaseData.changeAmount" disabled>
                          <template slot="append">万元</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="11">
                      <el-form-item label="变更前金额" prop="beforeChangeAmount">
                        <el-input v-model="formBaseData.beforeChangeAmount" disabled>
                          <template slot="append">万元</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item label="变更后金额" prop="afterChangeAmount">
                        <el-input v-model="formBaseData.afterChangeAmount" disabled>
                          <template slot="append">万元</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <div class="info-detail-box">
                      <div class="left-box">
                        <div class="left-content-box WholeScroll">
                          <div class="flex-row-bridge" v-for="(item,index) in formBaseData.leftArr" :key="index">
                            <div :style="{'visibility':chooseLeftIndex == index ? 'unset' : 'hidden'}" style="width: 4px;height: 4px;background-color: #409EFF;border-radius: 90%"></div>
                            <p :class="chooseLeftIndex == index ? 'chooseText' : ''" @click="chooseLeftIndex = index,chooseRightObj = item">{{item.subitemName}}</p>
                            <i class="iconfont icon-shanchu2" @click="deleteDataList(index,formBaseData.leftArr)" v-if="detailType!='check'&& detailType!='approve'"></i>
                          </div>
                        </div>
                        <div class="left-bottom-group">
                          <el-button type="primary" size="small" class="add buildButtonStyle" v-if="detailType!='check' && detailType!='approve'" @click="addMeasureBatch(formBaseData.leftArr)"> 新增变更子项
                          </el-button>
                        </div>
                      </div>

                      <div class="right-box-change">
                        <div v-show="Object.keys(chooseRightObj).length != 0" style="width: 100%;">
                          <el-col :span="24">
                            <div class="public-flex-row" style="align-items: center;margin: 15px 0 20px">
                              <span style="margin-right: 15px;white-space: nowrap"><span style="color: #F56C6C;">*</span>变更子项名称</span>
                              <el-input placeholder="请输入变更子项名称" v-model="chooseRightObj.subitemName" :disabled="detailType === 'check' || detailType == 'approve'"></el-input>
                            </div>
                          </el-col>

                          <el-col :span="24">
                            <div class="table-title">
                              <span>清单与数量</span>
                              <div class="public-flex-row">
                                <el-button class="greenButton" v-if="detailType == 'build' || detailType == 'edit'" type="success" @click="addTable">+新增一行
                                </el-button>
                                <el-upload class="upload-demo fill span18" action="" :before-upload="submitImportExcel">
                                  <el-button v-if="detailType!='check' && detailType!='approve'" id="excel-import-button" class="greenButton" style="margin: 0 10px" size="small"><i class="iconfont icon-icon_zp"></i> 导入
                                  </el-button>
                                </el-upload>
                                <el-button class="blueButton" v-if="detailType == 'build' || detailType == 'edit'" type="primary" @click="downfile">模板下载
                                </el-button>
                              </div>
                            </div>

                            <el-table class="fixed-table-class" :border="true" :header-cell-style="{padding: '8px 0',height:'48px',backgroundColor: '#f2f2f2',textAlign:'center',borderColor: '#d4d4d4'}" :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName" :cell-style="{padding: '6px 0',textAlign:'center',borderColor: '#d4d4d4'}" ref="multipleTable" :data="chooseRightObj.secondTableData" @cell-click="cellClick" @cell-mouse-enter="cellHover" @cell-mouse-leave="cellHoverLeave" height="300" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px; border:1px soild red;">
                              <el-table-column show-overflow-tooltip type="index" label="序号" fixed="left" width="50">
                                <template slot-scope="scope">
                                  <i class="iconfont icon-shanchu2 hoverIcon" v-if="scope.row.index == hoverRowIndex && scope.column.index == hoverColumnIndex" @click="deleteTableRow(scope.row,scope.column,scope.$index)"></i>
                                  <span v-else>{{ scope.$index+1 }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column show-overflow-tooltip prop="listNumber" fixed="left" label="清单编号" min-width="140">
                                <template slot-scope="{ row, column }">
                                  <el-input :ref="`in${row.index}${column.index}`" v-if="row.index == rowIndex && column.index == columnIndex" v-model="row.listNumber" @blur="inputBlur('listNumber',row)" :disabled="(detailType === 'check' || detailType === 'approve')"></el-input>
                                  <span v-else>{{ row.listNumber }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column show-overflow-tooltip prop="changeName" label="变更项目名称" fixed="left" width="170">
                                <template slot-scope="{ row, column }">
                                  <el-input :ref="`in${row.index}${column.index}`" v-if="row.index == rowIndex && column.index == columnIndex" v-model="row.changeName" @blur="inputBlur('changeName',row)" :disabled="(detailType === 'check' || detailType === 'approve')"></el-input>
                                  <span v-else>{{ row.changeName }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column show-overflow-tooltip prop="unit" label="单位" fixed="left" style="text-align: center" width="80">
                                <template slot-scope="{ row, column }">
                                  <el-input :ref="`in${row.index}${column.index}`" v-if="row.index == rowIndex && column.index == columnIndex" v-model="row.unit" @blur="inputBlur('unit',row)" :disabled="(detailType === 'check' || detailType === 'approve')"></el-input>
                                  <span v-else>{{ row.unit }}</span>
                                </template>
                              </el-table-column>
                              <el-table-column label="原合同">
                                <el-table-column prop="oldContractNum" label="数量" width="80">
                                  <template slot-scope="{ row, column }">
                                    <el-input :id="`in${row.index}${column.index}`" v-if="row.index == rowIndex && column.index == columnIndex" v-model="row.oldContractNum" @blur="inputBlur('oldContract',row)" type="number" :disabled="(detailType === 'check' || detailType === 'approve')"></el-input>
                                    <span v-else>{{ row.oldContractNum }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="oldContractUnitprice" label="合同单价（万元）" width="100">
                                  <template slot-scope="{ row, column }">
                                    <el-input :id="`in${row.index}${column.index}`" v-if="row.index == rowIndex && column.index == columnIndex" v-model="row.oldContractUnitprice" @blur="inputBlur('oldContract',row)" type="number" :disabled="(detailType === 'check' || detailType === 'approve')"></el-input>
                                    <span v-else>{{ row.oldContractUnitprice }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="oldContractAmount" label="金额（万元）" width="120">
                                  <template slot-scope="{ row, column }">
                                    <span>{{ row.oldContractAmount }}</span>
                                  </template>
                                </el-table-column>
                              </el-table-column>
                              <el-table-column show-overflow-tooltip label="变更数量及变更金额增减">
                                <el-table-column show-overflow-tooltip prop="changeNum" label="变更数量" width="100">
                                  <template slot-scope="{ row, column }">
                                    <el-input :id="`in${row.index}${column.index}`" v-if="row.index == rowIndex && column.index == columnIndex" v-model="row.changeNum" @blur="inputBlur('change',row)" type="number" :disabled="(detailType === 'check' || detailType === 'approve')"></el-input>
                                    <span v-else>{{ row.changeNum }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="changeAfterUnitprice" label="变更单价（万元）" width="100">
                                  <template slot-scope="{ row, column }">
                                    <!-- 原先条件：row.index == rowIndex && column.index == columnIndex && (row.oldContractUnitprice == '' || row.oldContractUnitprice == null || row.oldContractUnitprice == '0') -->
                                    <el-input :id="`in${row.index}${column.index}`" v-if="row.index == rowIndex && column.index == columnIndex" v-model="row.changeAfterUnitprice" @blur="inputBlur('change',row)" type="number" :disabled="(detailType === 'check' || detailType === 'approve')"></el-input>
                                    <span v-else>{{ row.changeAfterUnitprice }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="changeAmount" label="变更金额（万元）" width="100">
                                  <template slot-scope="{ row, column }">
                                    <span>{{ row.changeAmount }}</span>
                                  </template>
                                </el-table-column>
                              </el-table-column>
                              <el-table-column show-overflow-tooltip label="变更后">
                                <el-table-column show-overflow-tooltip prop="num" label="数量" width="100">
                                  <template slot-scope="{ row, column }">
                                    <span>{{ row.num }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="unitprice" label="单价(万元)" width="100">
                                  <template slot-scope="{ row, column }">
                                    <span>{{ row.unitprice }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="amount" label="金额(万元)" width="90">
                                  <template slot-scope="{ row, column }">
                                    <span>{{ row.amount }}</span>
                                  </template>
                                </el-table-column>

                              </el-table-column>
                              <el-table-column show-overflow-tooltip label="备注(价格调整方式)" width="130">
                                <template slot-scope="{ row, column }">
                                  <el-select v-model="row.remark" placeholder="请选择价格调整方式" :disabled="detailType === 'check'">
                                    <el-option v-for="item in selectList.changePriceList" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                  </el-select>
                                </template>
                              </el-table-column>
                            </el-table>
                          </el-col>
                        </div>
                      </div>
                    </div>

                  </el-row>
                </div>
                <div v-show="activeIndex == 2">
                  <el-row>
                    <el-col :span="24">
                      <cmsFileTable ref="cmsFileTable" :buildUnitTable="buildUnitTable" :fileSystem="fileSystem" :detailId="detailId" :detailType="detailType" :buttonDelShow="buttonDelShow" :showNone="showNone" :buttonCheckShow="buttonCheckShow" :buttonUploadShow="buttonUploadShow" @change="tableChange">
                      </cmsFileTable>
                    </el-col>
                  </el-row>
                </div>

                <!--                <el-row>-->
                <!--                  <el-col :span="24">-->
                <!--                    <bpmn-form v-if="isShowBpmn" ref="bpmnForm" :multiple="isMultiple" proc-def-key="designChangeApplyProcess" :business-id="formBaseData.id" :url="attributeUrl" :entity="formBaseData" @complete="onComplete" :needInit="false" :variables="variables"></bpmn-form>-->
                <!--                  </el-col>-->
                <!--                </el-row>-->

                <el-row>
                  <el-col :span="12" v-if="taskDefKey == 'UserTask_1kc9b8v'">
                    <el-form-item label="选择成本合同部经办人" prop="cbhtUser">
                      <el-select class="form-input" v-model="formBaseData.cbhtUser" filterable :disabled="detailType === 'check'" placeholder="请选择">
                        <el-option v-for="item in selectList.cbhtUserArr" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-if="taskDefKey == 'UserTask_1kc9b8v'">
                    <el-form-item label="选择质量安全部经办人" prop="zlaqUser">
                      <el-select class="form-input" v-model="formBaseData.zlaqUser" filterable :disabled="detailType === 'check'" placeholder="请选择">
                        <el-option v-for="item in selectList.zlaqUserArr" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <!--        <el-tab-pane label="审批记录" name="second" v-if="detailType!=='build'&&detailType!=='check'">-->
        <!--          <wf-process :inst-id="formBaseData.procInstId" :url="urlProcess" />-->
        <!--        </el-tab-pane>-->
      </el-tabs>

    </div>
    <div slot="footer" class="dialog-footer">
      <template v-if="detailType === 'build' || detailType === 'edit'">
        <el-button size="small" type="primary" :loading="isLoading" @click="handleClickDeal('submit', {flag: 1})">
          <i class="iconfont icon-icon_save"></i>确 定</el-button>
      </template>
      <el-button size="small" @click="handleClickDeal('cancel')"><i class="iconfont icon-icon_cancel"></i> 取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
  doCreateObject
} from '@/utils/publicFun'
import msgUtil from '@/utils/msgUtil'
import crudDict from '@/api/system/dict'
import designChangeApply from '@/api/buss/designChangeApply'
import projectSectionInfo from '@/api/buss/common'
import BpmnForm from '@/components/ExtBpmn/ExtForm/bpmn-form'
import WfProcess from '@/components/WorkFlow/process/index'
import { v4 as uuidv4 } from 'uuid'
import startMixin from '@/mixins/wfStartMixin'
import approveMixin from '@/mixins/wfApproveMixin'
import PopBtn from '@/components/ExtBpmn/Btn/index'
import { genZlaqUserList } from '@/api/buss/designChangeApply'

export default {
  name: 'withinProject-detail',
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {}
      }
    }
  },
  mixins: [startMixin, approveMixin],
  components: {
    WfProcess,
    BpmnForm,
    PopBtn
  },
  watch: {
    postDetail(value) {
      console.log("type=", value.type)
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      if (this.detailType == 'build') {
        this.isShowBpmn = true
        this.title = '新增变更申请'
      } else if (this.detailType == 'check') {
        this.title = '查看变更申请'
      } else if (this.detailType == 'edit') {
        this.isShowBpmn = true
        this.title = '编辑变更申请'
      } else if (this.detailType == 'approve') {
        this.isShowBpmn = true
        this.title = '审核变更申请'
      } else {
        this.title = ''
      }
      this.formBaseData.sectionId = value.addSectionId ? value.addSectionId : ''

      this.detailId = value.detailId ? value.detailId : ''
      if (this.detailType !== 'build') {
        this.getDetail()
      } else {
        this.formBaseData.projectId = value.projectId ? value.projectId : ''
        this.getSceneTentativeList()
        this.genChangeCode()
        this.getProposeCompany()
        //this.initBtn()
        this.addMeasureBatch(this.formBaseData.leftArr)
      }
    }
  },
  data() {
    return {
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      hoverRowIndex: -1, //行索引
      hoverColumnIndex: -1, //列索引
      secondTableData: [],
      files: [],
      readonly: false,
      variables: {},
      wfNode: {},
      attributeUrl: 'buss/designchangeapply/node/attribute',
      urlProcess: 'buss/designchangeapply/process',
      isShowBpmn: false,
      isMultiple: false,
      projectName: '',
      projectId: '',
      sectionId: '',
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      formShow: false, // 表单展示
      formlabelWidth: '130px', // 表单左侧标题宽度
      formlabelWidthTemp: '130px', // 表单左侧标题宽度
      activeName: 'first',
      title: '项目内督办',
      actionType: '',
      showCompany: false,
      taskDefKey: '',
      checkOpinionShow: false,
      opinionShow: false,
      chooseLeftIndex: '',
      chooseRightObj: {},
      formBaseData: {
        onSiteReviewId: '',
        proposeCompany: '',
        changeCode: '',
        mileageStakeNum: '',
        projectId: '',
        sectionId: '',
        changeContent: '',
        reason: '',
        ifGroup: '',
        oldDesign: '',
        changeDesign: '',
        groupApproveDate: '',
        ifManagerDept: '',
        managerDeptName: '',
        managerDeptApplyDate: '',
        managerDeptApproveDate: '',
        opinion: '',
        engineeringType: '',
        changeAmount: '',
        beforeChangeAmount: '',
        afterChangeAmount: '',
        checkOpinion: '',
        cbhtUser: '',
        zlaqUser: '',
        changeType: '',
        proposeDate: new Date().Format("yyyy-MM-dd"),
        secondTableData: [],
        file: [],
        leftArr: []
      },
      buildUnitTable: [
        {
          stuffName: '现场会会议纪要',
          part: 'partOne',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true

        },
        {
          stuffName: '设计变更现场初步审查表',
          part: 'partTwo',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true

        },
        {
          stuffName: '设计变更领导小组审查意见表',
          part: 'partThree',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true

        },
        {
          stuffName: '设计变更审核签认表',
          part: 'partFour',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true

        },
        {
          stuffName: '设计变更通知单',
          part: 'partFive',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true

        },
        {
          stuffName: '工程量测量成果',
          part: 'partSix',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true

        },
        {
          stuffName: '工程变更费用估算表',
          part: 'partSeven',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true

        },
        {
          stuffName: '计算表',
          part: 'partEight',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '变更前照片',
          part: 'partNine',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '变更的初步方案及设计图纸',
          part: 'partTen',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '专家论证会会议纪要',
          part: 'partEleven',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '总经办会议纪要',
          part: 'partTwelve',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '公司党委会会议纪要',
          part: 'partThirteen',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        },
        {
          stuffName: '其他',
          part: 'partFourteen',
          file: [{ realName: '' }],
          isNeed: false,
          loading: false,
          isMulti: true
        }
      ],
      fileSystem: {
        attachId: {
          partOne: '',
          partTwo: '',
          partThree: ''
        },
        sys: 'buss',
        module: 'designChangeApply',
        entityClass: 'designChangeApply',
        viewByAnon: true,
        longLife: false,
        part: {
          partOne: 'partOne',
          partTwo: 'partTwo',
          partThree: 'partThree'
        }
      },
      selectList: {
        projectType: [{
          label: '主体工程',
          value: '1'
        }, {
          label: '附属工程',
          value: '2'
        }],
        changePriceList: [{
          label: '执行中标价',
          value: '1'
        }, {
          label: '参照投标价调整',
          value: '2'
        }, {
          label: '按合同重新组价',
          value: '3'
        }],
        changeLevelArr: [{
          name: '一般',
          id: '1'
        }, {
          name: '较大',
          id: '2'
        }, {
          name: '重大',
          id: '3'
        }],
        chooseList: [{
          name: '是',
          value: '1'
        }, {
          name: '否',
          value: '0'
        }],
        relevancyTentativeList: [],
        putUnitList: [],
        options: [],
        superviseHandleTypeList: [],
        sectionList: [],
        supervisedDeptList: [],
        issuingDeptList: [],
        issuingCompanyList: [],
        groupSuperviseHandleList: [],
        supervisedOperatorList: [],
        cbhtUserArr: [],
        zlaqUserArr: []
      },
      fileList: [
        {
          name: '督办通知单'
        },
        {
          name: '督办通知单'
        }
      ],
      tabs: [
        '基本信息',
        '工程数量、费用',
        '附件清单'
      ],
      activeIndex: 0,
      formBaseRules: {
        opinion: [
          {
            required: true,
            message: '请输入设计变更领导小组审查意见',
            trigger: 'blur'
          }
        ],
        checkOpinion: [
          {
            required: true,
            message: '请输入审查意见',
            trigger: 'blur'
          }
        ],
        zlaqUser: [
          {
            required: true,
            message: '请选择质量安全部经办人',
            trigger: 'blur'
          }
        ],
        cbhtUser: [
          {
            required: true,
            message: '请选择成本合同部经办人',
            trigger: 'blur'
          }
        ],
        proposeCompany: [
          {
            required: true,
            message: '请选择提出单位',
            trigger: 'blur'
          }
        ],
        changeCode: [
          {
            required: true,
            message: '请输入变更编号',
            trigger: 'blur'
          }
        ],
        mileageStakeNum: [
          {
            required: true,
            message: '请输入里程桩号（部位）',
            trigger: 'blur'
          }
        ],
        changeLevel: [
          {
            required: true,
            message: '请选择变更等级',
            trigger: 'blur'
          }
        ],
        proposeDate: [
          {
            required: true,
            message: '请选择提出日期',
            trigger: 'blur'
          }
        ],
        changeName: [
          {
            required: true,
            message: '请输入变更名称',
            trigger: 'blur'
          }
        ],
        changeContent: [
          {
            required: true,
            message: '请输入变更内容',
            trigger: 'blur'
          }
        ],
        reason: [
          {
            required: true,
            message: '请输入设计变更理由',
            trigger: 'blur'
          }
        ],
        ifGroup: [
          {
            required: true,
            message: '请选择是否集团审查',
            trigger: 'blur'
          }
        ],
        groupApproveDate: [
          {
            required: true,
            message: '请选择集团评审时间',
            trigger: 'blur'
          }
        ],
        ifManagerDept: [
          {
            required: true,
            message: '请选择是否主管部门审查',
            trigger: 'blur'
          }
        ],
        managerDeptName: [
          {
            required: true,
            message: '请输入主管部门名称',
            trigger: 'blur'
          }
        ],
        managerDeptApplyDate: [
          {
            required: true,
            message: '请选择主管部门申请时间',
            trigger: 'blur'
          }
        ],
        managerDeptApproveDate: [
          {
            required: true,
            message: '请选择主管部门评审时间',
            trigger: 'blur'
          }
        ],
        engineeringType: [
          {
            required: true,
            message: '请选择工程类型',
            trigger: 'blur'
          }
        ],
        changeAmount: [
          {
            required: true,
            message: '请输入变更金额',
            trigger: 'blur'
          }
        ],
        beforeChangeAmount: [
          {
            required: true,
            message: '请输入变更前金额',
            trigger: 'blur'
          }
        ],
        afterChangeAmount: [
          {
            required: true,
            message: '请输入变更后金额',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    tableHeight: function() {
      return (window.innerHeight - 500) + 'px';
    }
  },
  methods: {
    addMeasureBatch(arrList, type) {
      let list = JSON.parse(JSON.stringify(arrList))
      let arr = {
        name: '',
        subitemName: '未命名变更子项名称',
        secondTableData: []
      }
      arrList.push(arr)

      if (list.length == 0) {
        this.chooseRightObj = arrList[0]
      }
    },
    deleteDataList(index, arrData) {
      this.$confirm('确定是否删除？', '提示', {
        confirmButtonClass: 'iconfont icon-icon_ok',
        cancelButtonClass: 'iconfont icon-icon_cancel',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          if (arrData.length == 1) {
            arrData.splice(index, 1)
            this.chooseLeftIndex = ''
            this.formBaseData.changeAmount = ''
            this.formBaseData.beforeChangeAmount = ''
            this.formBaseData.afterChangeAmount = ''
            this.$set(this, 'chooseRightObj', {})
          } else {
            arrData.splice(index, 1)
            // let arr = JSON.parse(JSON.stringify(arrData))
            // this.$set(arrData,'array',arr)
            let changeAmount = 0
            let changeBeforeAmount = 0
            let changeAfterAmount = 0
            this.formBaseData.leftArr.forEach(i => {
              i.secondTableData.forEach((item, index) => {
                if (item.oldContractAmount) {
                  changeBeforeAmount = changeBeforeAmount + Number(item.oldContractAmount)
                }
                if (item.changeAmount) {
                  changeAmount = changeAmount + Number(item.changeAmount)
                }
                if (item.amount) {
                  changeAfterAmount = changeAfterAmount + Number(item.amount)
                }
              })
            })
            this.formBaseData.changeAmount = changeAmount
            this.formBaseData.beforeChangeAmount = changeBeforeAmount
            this.formBaseData.afterChangeAmount = changeAfterAmount
            this.chooseLeftIndex = 0
            this.$set(this, 'chooseRightObj', arrData[0])

            if (!this.chooseRightObj) {
              this.chooseRightObj = {}
            }
          }

        })
        .catch(() => {
        })
    },
    genCbhtUserList() {
      designChangeApply.genCbhtUserList({ projectId: this.formBaseData.projectId }).then(res => {
        if (res.code == 200) {
          this.selectList.cbhtUserArr = res.data
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },
    genZlaqUserList() {
      designChangeApply.genZlaqUserList({ projectId: this.formBaseData.projectId }).then(res => {
        if (res.code == 200) {
          this.selectList.zlaqUserArr = res.data
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },
    genChangeCode() {
      designChangeApply.genChangeCode({ sectionId: this.formBaseData.sectionId }).then((res) => {
        if (res.code == 200) {
          this.formBaseData.changeCode = res.data
        } else {
          this.$messageError(res.message)
        }
      })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.$messageError('提出变更编号失败')
        })
    },
    selectOnSiteReview() {
      this.selectList.relevancyTentativeList.forEach(item => {
        if (this.formBaseData.onSiteReviewId == item.id) {
          this.formBaseData.proposeCompany = item.proposer
          this.formBaseData.mileageStakeNum = item.mileageStakeNumber
          this.formBaseData.changeContent = item.changeContent
          this.formBaseData.reason = item.changeResult
          this.showCompany = true
        }
      })
    },
    getProposeCompany() {
      designChangeApply.getProposeCompany({ sectionId: this.formBaseData.sectionId }).then((res) => {
        if (res.code == 200) {
          this.selectList.putUnitList = res.data
        } else {
          this.$messageError(res.message)
        }
      })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.$messageError('提出单位获取失败')
        })
    },
    getSceneTentativeList() {
      designChangeApply.getSceneTentativeList({
        sectionId: this.formBaseData.sectionId,
        onSiteReviewId: this.formBaseData.onSiteReviewId
      }).then((res) => {
        if (res.code == 200) {
          this.selectList.relevancyTentativeList = res.data
        } else {
          this.$messageError(res.message)
        }
      })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.$messageError('现场初步审查获取失败')
        })
    },
    //  下载模板
    downfile() {
      designChangeApply.downfile(this.search).then(res => {
        doCreateObject(res, '设计变更申请-清单导入模板.xlsx')
      }).catch(e => {
        console.log(e)
        this.$messageError('请求excel模板失败')
      })
    },
    //  提交excel导入文件选择（承包商）
    submitImportExcel(file) {
      let fd = new FormData()
      fd.append('file', file)
      fd.append('Content-Type', 'multipart/form-data; boundary=----WebKitFormBoundaryIOi8qEBAFV1KN25n')
      designChangeApply.importExcel(fd).then(res => {
        if (res.code == 200) {
          this.chooseRightObj.secondTableData = res.data
          let changeAfter = 0
          let change = 0
          let changezj = 0
          this.formBaseData.leftArr.forEach(i => {
            i.secondTableData.forEach(item => {
              changeAfter = Number(changeAfter) + Number(item.amount)
              change = Number(change) + Number(item.oldContractAmount)
              changezj = Number(changezj) + Number(item.changeAmount)
            })
          })

          this.formBaseData.afterChangeAmount = changeAfter.toFixed(2)
          this.formBaseData.beforeChangeAmount = change.toFixed(2)
          this.formBaseData.changeAmount = changezj.toFixed(2)
          this.$messageSuccess(`成功导入数据`)
        } else {
          this.$messageError('请求导入excel失败:' + res.data.message)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    addTable() {
      this.chooseRightObj.secondTableData.push({
        code: '',
        changeProjectName: '',
        changeAfterUnitprice: '',
        unit: '',
        number: '',
        contractPrice: '',
        money: '',
        changeNum: '',
        afterChangePrice: '',
        changeMoney: '',
        afterChangeNum: '',
        afterChangeDoller: '',
        afterChangeMoney: '',
        oldContractNum: '',
        remark: '1'
      })
      this.$refs.multipleTable.doLayout()
    },
    deleteTableRow(row, column, index) {
      console.log(row, column)
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.chooseRightObj.secondTableData.splice(index, 1)
        let changeAmount = 0
        let changeBeforeAmount = 0
        let changeAfterAmount = 0
        this.formBaseData.leftArr.forEach(i => {
          i.secondTableData.forEach((item, index) => {
            if (item.oldContractAmount) {
              changeBeforeAmount = changeBeforeAmount + Number(item.oldContractAmount)
            }
            if (item.changeAmount) {
              changeAmount = changeAmount + Number(item.changeAmount)
            }
            if (item.amount) {
              changeAfterAmount = changeAfterAmount + Number(item.amount)
            }
          })
        })
        this.formBaseData.changeAmount = changeAmount
        this.formBaseData.beforeChangeAmount = changeBeforeAmount
        this.formBaseData.afterChangeAmount = changeAfterAmount
        this.$messageSuccess('删除成功!')
      }).catch(() => {
        this.$messageWarning('已取消删除')
      })
    },
    // 失去焦点
    inputBlur(type, row) {
      if (type == 'oldContract') {
        if (row.oldContractNum && row.oldContractUnitprice) {
          row.oldContractAmount = (row.oldContractNum * row.oldContractUnitprice).toFixed(2)
        }
        if (row.oldContractUnitprice != '0' && row.oldContractUnitprice != null && row.oldContractUnitprice != '') {
          row.changeAfterUnitprice = 0
          row.unitprice = row.oldContractUnitprice
          if (row.changeNum != null) {
            row.changeAmount = (Number(row.unitprice) * Number(row.changeNum)).toFixed(2)
          }
        }
      }
      if (type == 'change') {
        if (row.changeNum != null && row.changeAfterUnitprice != null) {
          if (row.changeAfterUnitprice == 0) {
            if (row.unitprice != null) {
              row.changeAmount = (Number(row.unitprice) * Number(row.changeNum)).toFixed(2)
            }
          } else {
            row.changeAmount = (Number(row.changeAfterUnitprice) * Number(row.changeNum)).toFixed(2)
          }
        }
        // 原先条件row.changeAfterUnitprice && (!row.oldContractUnitprice || row.oldContractUnitprice == '0') && Number(row.changeAfterUnitprice) < 0
        if (row.changeAfterUnitprice && Number(row.changeAfterUnitprice) < 0) {
          this.$messageError('请输入正数')
          row.changeAfterUnitprice = null
          return
        }
      }
      if (row.oldContractNum && row.changeNum) {
        row.num = Number(row.oldContractNum) + Number(row.changeNum)
      }
      if (row.oldContractNum && !row.changeNum) {
        row.num = row.oldContractNum
      }
      if (row.changeNum && !row.oldContractNum) {
        row.num = row.changeNum
      }
      if (row.changeAfterUnitprice) {
        row.unitprice = row.changeAfterUnitprice
      }
      if (row.unitprice && row.num) {
        row.amount = (row.unitprice * row.num).toFixed(2)
      }
      let changeAmount = 0
      let changeBeforeAmount = 0
      let changeAfterAmount = 0
      this.formBaseData.leftArr.forEach(i => {
        i.secondTableData.forEach((item, index) => {
          if (item.oldContractAmount) {
            changeBeforeAmount = changeBeforeAmount + Number(item.oldContractAmount)
          }
          if (item.changeAmount) {
            changeAmount = changeAmount + Number(item.changeAmount)
          }
          if (item.amount) {
            changeAfterAmount = changeAfterAmount + Number(item.amount)
          }
        })
      })
      this.formBaseData.changeAmount = changeAmount
      this.formBaseData.beforeChangeAmount = changeBeforeAmount
      this.formBaseData.afterChangeAmount = changeAfterAmount
      this.rowIndex = -1
      this.columnIndex = -1
    },
    cellHoverLeave() {
      this.hoverRowIndex = -1
      this.hoverColumnIndex = -1
    },
    cellClick(row, column) {
      this.rowIndex = row.index
      this.columnIndex = column.index
      this.$nextTick(() => {
        if (this.$refs[`in${row.index}${column.index}`]) {
          this.$refs[`in${row.index}${column.index}`].focus()
        } else if (document.getElementById(`in${row.index}${column.index}`)) {
          document.getElementById(`in${row.index}${column.index}`).focus()
        }
      })
    },
    cellHover(row, column) {
      console.log(row, column, 'vvvvvvvvvv')
      this.hoverRowIndex = row.index
      this.hoverColumnIndex = column.index
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放到row里
      row.index = rowIndex
    },
    tableCellClassName({ column, columnIndex }) {
      // 把每一列的索引放到column里
      column.index = columnIndex
    },
    showRowTable() {
      //原先条件：this.detailType == 'check' || this.detailType == 'approve'
      //2023-12-03:更改条件：查看状态下，不允许显示，所以去掉查看显示条件
      if (this.detailType == 'approve') {
        return true
      } else {
        return false
      }
    },
    initBtn() {
      // this.variables.issuingDeptId=this.formBaseData.issuingDeptId
      // this.selectList.sectionList.forEach(item=>{
      //   if(this.formBaseData.sectionId==item.id){
      //     this.variables.companyType=item.type
      //   }
      // })
      const params = {
        businessId: this.formBaseData.id,
        procDefKey: 'designChangeApplyProcess',
        url: this.attributeUrl,
        entity: this.formBaseData,
        variables: this.variables
      }
      this.$nextTick(() => {
        if (this.$refs.bpmnForm) { this.$refs.bpmnForm.initNodeAttribute(params) }
        // this.$refs.btn.getBtnListWithParam(params)
      })

    },
    onApprove(params, callback) {
      this.userAudit(params, callback)
    },

    userAudit(params, callback) {
      if (params.isReject == 1) {
        const dealForm = this.$refs.bpmnForm.getForm()
        if (!params || params.isReject != 1) {
          if (this.$refs.bpmnForm.showUserSelect) {
            if (!dealForm.selectAssigneeList.length) {
              callback && callback()
              msgUtil.error2('请选择处理人!')
              return
            }
          }
        }

        this.variables = { changeType: this.formBaseData.changeType }
        this.approveForm.procDefKey = 'designChangeApplyProcess'
        this.approveForm.businessId = this.formBaseData.id
        this.approveForm.procInstId = this.formBaseData.procInstId
        this.approveForm.description = dealForm.description
        this.approveForm.selectAssigneeList = dealForm.selectAssigneeList
        this.approveForm.entity = this.formBaseData
        this.approveForm.attribute = this.variables
        // 覆盖按钮参数
        Object.assign(this.approveForm, params)
        designChangeApply.audit(this.approveForm).then(res => {
          msgUtil.success2('审批成功!')
          this.formShow = false
          this.$emit('reloadList')
        }).finally(() => {
          callback && callback()
        })
      } else {
        this.$refs['formBaseData'].validate((valid) => {
          if (valid) {
            const dealForm = this.$refs.bpmnForm.getForm()
            if (!params || params.isReject != 1) {
              if (this.$refs.bpmnForm.showUserSelect) {
                if (!dealForm.selectAssigneeList.length) {
                  callback && callback()
                  msgUtil.error2('请选择处理人!')
                  return
                }
              }
            }

            this.variables = { changeType: this.formBaseData.changeType }
            this.approveForm.procDefKey = 'designChangeApplyProcess'
            this.approveForm.businessId = this.formBaseData.id
            this.approveForm.procInstId = this.formBaseData.procInstId
            this.approveForm.description = dealForm.description
            this.approveForm.selectAssigneeList = dealForm.selectAssigneeList
            this.approveForm.entity = this.formBaseData
            this.approveForm.attribute = this.variables
            // 覆盖按钮参数
            Object.assign(this.approveForm, params)
            designChangeApply.audit(this.approveForm).then(res => {
              msgUtil.success2('审批成功!')
              this.formShow = false
              this.$emit('reloadList')
            }).finally(() => {
              callback && callback()
            })
          } else {
            // this.$refs.btn.resetLoading()
          }
        })
      }

    },

    // 上报
    onApply(_, callback) {
      // 表单验证
      this.$refs['formBaseData'].validate((valid) => {
        if (valid) {
          let startForm = {}
          this.formBaseData.secondTableData = this.secondTableData
          startForm.entity = this.formBaseData
          startForm.procDefKey = 'designChangeApplyProcess'
          startForm.businessId = this.formBaseData.id
          startForm.variables = this.variables
          const dealForm = this.$refs.bpmnForm.getForm()
          startForm.selectAssigneeList = dealForm.selectAssigneeList
          if (!dealForm.selectAssigneeList.length) {
            callback && callback()
            msgUtil.error2('请选择处理人!')
            return
          }
          designChangeApply.report(startForm).then(async (res) => {
            if (res.code == 200) {
              this.detailId = res.data.businessId
              this.saveFiles()
              this.formShow = false
              this.$notify({
                title: '上报成功',
                type: 'success',
                duration: 1500
              })
              // this.$refs.btn.resetLoading()
              await this.$emit('reloadList')
            }
          }).finally(() => {
            // this.$refs.btn.resetLoading()
            callback && callback()
          })
        } else {
          // this.$refs.btn.resetLoading()
        }
      })
    },
    cancel() {
      this.handleClickDeal('cancel')
    },

    onSave(_, callback) {
      this.handleClickDeal('submit', { flag: 1 }, callback)
    },
    onComplete(data) {
      this.wfNode = data
    },
    getContractSection(flag) {
      this.selectList.sectionList = []
      projectSectionInfo.getContractSection({ projectId: this.projectId }).then(res => {
        if (res.code === 200) {
          this.selectList.sectionList = res.data
          if (flag) {
            if (this.detailType == 'approve' || this.detailType == 'edit') {
              this.initBtn()
            }
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(res => {
        console.log('请求出现错误', res)
        msgUtil.error2('获取责任标段下拉失败!')
      })
    },
    getDetail() {
      designChangeApply.getOne(this.detailId).then(async (res) => {
        if (res.code == 200) {
          let data = res.data
          // 中间进行处理数据 然后赋值
          this.formBaseData = data
          this.getProposeCompany()
          this.getSceneTentativeList()
          this.formBaseData.leftArr = data.changeSubitems
          if (this.formBaseData.leftArr.length > 0) {
            this.chooseLeftIndex = 0
            this.chooseRightObj = this.formBaseData.leftArr[0]
          }
          this.files = data.files
          this.taskDefKey = data.taskKey
          if (data.taskKey == 'UserTask_1kc9b8v' && this.detailType == 'approve') {
            this.genCbhtUserList()
            this.genZlaqUserList()
          }
          if (data.checkOpinionShow == '1') {
            this.checkOpinionShow = true
          }
          if (data.opinionShow == '1') {
            this.opinionShow = true
          }
          this.initBtn()
          this.loadFiles()
        } else {
          this.$messageError(res.data.message)
        }
      }).catch((res) => {
        console.log('请求出现错误', res)
        this.$messageError(this.$route.name + '获取详情请求-请求失败')
      })
    },
    handleClickDeal(type, res, callback) {
      switch (type) {
        case 'cancel':
          console.log(this.activeName)
          if (this.$refs['formBaseData'] !== undefined) {
            this.$refs['formBaseData'].resetFields()
          }
          this.checkOpinionShow = false
          this.opinionShow = false
          this.chooseRightObj = {}
          this.chooseLeftIndex = ''
          this.formBaseData = {
            onSiteReviewId: '',
            proposeCompany: '',
            changeCode: '',
            mileageStakeNum: '',
            projectId: '',
            sectionId: '',
            changeContent: '',
            reason: '',
            ifGroup: '',
            oldDesign: '',
            changeDesign: '',
            groupApproveDate: '',
            ifManagerDept: '',
            managerDeptName: '',
            managerDeptApplyDate: '',
            managerDeptApproveDate: '',
            opinion: '',
            engineeringType: '',
            changeAmount: '',
            beforeChangeAmount: '',
            afterChangeAmount: '',
            checkOpinion: '',
            cbhtUser: '',
            zlaqUser: '',
            changeType: '',
            proposeDate: new Date(),
            secondTableData: [],
            file: [],
            leftArr: []
          }
          this.buildUnitTable = [
            {
              stuffName: '现场会会议纪要',
              part: 'partOne',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true

            },
            {
              stuffName: '设计变更现场初步审查表',
              part: 'partTwo',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true

            },
            {
              stuffName: '设计变更领导小组审查意见表',
              part: 'partThree',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true

            },
            {
              stuffName: '设计变更审核签认表',
              part: 'partFour',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true

            },
            {
              stuffName: '设计变更通知单',
              part: 'partFive',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true

            },
            {
              stuffName: '工程量测量成果',
              part: 'partSix',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true

            },
            {
              stuffName: '工程变更费用估算表',
              part: 'partSeven',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true

            },
            {
              stuffName: '计算表',
              part: 'partEight',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            },
            {
              stuffName: '变更前照片',
              part: 'partNine',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            },
            {
              stuffName: '变更的初步方案及设计图纸',
              part: 'partTen',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            },
            {
              stuffName: '专家论证会会议纪要',
              part: 'partEleven',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            },
            {
              stuffName: '总经办会议纪要',
              part: 'partTwelve',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            },
            {
              stuffName: '公司党委会会议纪要',
              part: 'partThirteen',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            },
            {
              stuffName: '其他',
              part: 'partFourteen',
              file: [{ realName: '' }],
              isNeed: false,
              loading: false,
              isMulti: true
            }
          ]
          // 关闭弹窗
          this.showCompany = false
          this.secondTableData = []
          this.currentQuestionIndex = ''
          this.currentQuestion = ''
          this.selectList.supervisedDeptList = []
          this.selectList.issuingDeptList = []
          this.selectList.supervisedOperatorList = []
          this.questions = []
          this.taskDefKey = ''
          this.tabs = [
            '基本信息',
            '工程数量、费用',
            '附件清单']
          this.activeIndex = 0
          this.formShow = false
          this.isShowBpmn = false
          break
        case 'submit':
          let flag = res.flag
          // 表单验证
          if (this.formBaseData.leftArr.length > 0) {
            let flag = true
            for (let i in this.formBaseData.leftArr) {
              let item = this.formBaseData.leftArr[i]
              if (item.subitemName == '') {
                flag = false
              }
            }
            if (!flag) {
              this.$messageError('请输入变更子项名称')
              callback && callback()
              return
            }
          }
          console.log(this.formBaseData, 'formBaseData')
          this.$refs['formBaseData'].validate((valid) => {
            if (valid) {
              this.isLoading = true
              // 提交详情
              this.submitDetail(flag, callback)

            } else {
              // this.$refs.btn.resetLoading()
              callback && callback()
            }
          })
          break
      }
    },
    submitDetail(type, callback) {
      let url = '/buss/designchangeapply/add'
      if (this.detailType === 'build') {
        url = '/buss/designchangeapply/add'
      } else {
        url = '/buss/designchangeapply/edit'
      }
      let param = JSON.parse(JSON.stringify(this.formBaseData));
      param.proposeDate = param.proposeDate ? param.proposeDate.substring(0, 10) : "";
      return this.$httpPost(url, param)
        .then((res) => {
          if (res.code == 200) {
            this.detailId = res.data.id
            this.$messageSuccess('保存成功')
            this.saveFiles()
            this.formShow = false
            this.isLoading = false
            // this.$refs.btn.resetLoading()
            if (callback) callback()
            // 传值给父组件刷新列表
            this.$emit('reloadList')
          } else {
            this.isLoading = false
            // this.$refs.btn.resetLoading()
            this.$messageError(res.message)
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
          // this.$refs.btn.resetLoading()
          this.isLoading = false
          this.$messageError(this.$route.name + '提交详情-请求失败')
        })
    },
    saveFiles() {
      if (this.$refs['cmsFileTable'] != undefined) {
        this.$refs['cmsFileTable'].bindAllFile(this.detailId)
      }
      // for (let k in this.fileSystem) {
      //   let fileProp = this.fileSystem[k]
      //   this.$refs[fileProp.compoName].saveAll(this.detailId)
      // }
    },
    loadFiles() {
      this.$nextTick(() => {
        for (let k in this.fileSystem) {
          let fileProp = this.fileSystem[k]
          if (this.$refs[fileProp.compoName]) {
            this.$refs[fileProp.compoName].init()
          }
        }
      })
    },
    changeTab(index) {
      this.activeIndex = index
    },
    /**
     *显示删除按钮
     * @param row
     */
    buttonDelShow(row) {
      let flag = false
      if ((this.detailType === 'build' || this.detailType === 'edit') && row.file[0].realName !== '' && !row.isNeed) {
        flag = true
      }
      // 多文件上传的控制的控制
      if (row.isMulti) {
        flag = false
      }
      return flag
    },

    /**
     *控制显示暂无文件
     * @param row
     */
    showNone(row) {
      let flag = false
      if (
        this.detailType !== 'build' &&
        this.detailType !== 'edit' &&
        row.file[0].realName === ''
      ) {
        flag = true
      }
      if (this.detailType != 'check') {
        if (this.taskKey == 'UserTask_12bkdig' || this.taskKey == 'UserTask_0j6nh64'
          || this.taskKey == 'UserTask_12fwzff' || this.taskKey == 'UserTask_1f0a5ck'
          || this.taskKey == 'UserTask_1m1q5vc' || this.taskKey == 'UserTask_0hc4d7t') {
          if (row.stuffName == '其他附件') {
            flag = false
          }
        }

        if (this.taskKey == 'UserTask_1dozecc') {
          if (row.stuffName == '其他附件') {
            flag = false
          }
          if (row.stuffName == '咨询单位的回函') {
            flag = false
          }
        }
      }
      return flag
    },
    /**
     * 控制查看按钮显示
     * @param row
     */
    buttonCheckShow(row) {
      let flag = false
      if (
        this.detailType !== 'build' &&
        this.detailType !== 'edit' &&
        row.file[0].realName !== ''
      ) {
        flag = true
      }
      // 多文件上传的控制的控制
      if (row.isMulti) {
        flag = false
      }
      return flag
    },
    /**
     * 控制上传按钮显示
     * @param row
     * @returns {boolean}
     */
    buttonUploadShow(row) {
      let flag = false
      if (this.detailType === 'build' || this.detailType === 'edit') {
        flag = true
      }
      return flag
    },
    tableChange(val) {
      this.$set(this, 'buildUnitTable', [...val])
    }
  }
}
</script>
<style scoped lang="scss">
$borderColor: #c0c4cc;
.WholeScroll {
  overflow-y: auto;
}

.detail-box {
  width: 100%;
  height: 650px;
}

.file-table {
  min-height: 100px;
  height: fit-content;
  width: 100%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
}

li {
  list-style-type: none;
}

.first-tab {
  display: flex;
  flex-direction: column;
  height: 560px;
}

.content-box {
  overflow-y: auto;
  border: 1px solid #e2e8ec;
  flex: 1;
  margin-top: 20px;
  display: flex;
  flex-direction: row;

  .left-box {
    border-right: 1px solid #e2e8ec;
    padding: 20px 0px 0px 40px;
    width: 200px;
    height: 100%;

    p {
      cursor: pointer;
      font-size: 15px;
    }

    .active {
      color: #409eff;
      font-weight: bold;
    }
  }

  .right-box {
    width: calc(100% - 200px);
    height: 100%;
    padding: 20px 20px;

    ::v-deep .el-form-item__label {
      display: block;
      float: inherit !important;
      text-align: left !important;
      font-weight: normal;
    }

    .text-link {
      cursor: pointer;
      color: #409eff !important;

      &:hover {
        text-decoration: underline;
      }
    }

    .text-link-split {
      color: #409eff !important;
    }

    .form-input {
      width: 100%;
    }
  }
}

.table-title {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.hoverIcon {
  cursor: pointer;
}

.hoverIcon:hover {
  color: red;
}

.info-detail-box {
  border: 1px $borderColor solid;
  display: flex;
  flex-direction: row;
  margin: 30px 0;
  // height: 450px;
  .left-box {
    width: 230px;
    padding: 0 0 15px 0;
    padding-bottom: 50px;
    border-right: 1px $borderColor solid;
    position: relative;
    .left-content-box {
      padding: 10px;
      height: 400px;
      overflow-y: auto;
      box-sizing: border-box;
    }
    p {
      cursor: pointer;
    }
  }

  .right-box-change {
    width: calc(100% - 230px);
    height: 450px;
    padding: 15px;
    padding-bottom: 30px;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .chooseText {
    color: #409eff;
    font-weight: bold;
  }
}

.left-bottom-group {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 10px;
  left: 0;
  .deleteBatch {
    background-color: rgba(215, 215, 215, 0);
    border-color: #409eff;
    color: #409eff;
  }
}

.flex-row-bridge {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  p {
    margin: 5px 0;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: space-between;
  }

  i {
    cursor: pointer;
  }

  i:hover {
    color: #a71c1c;
  }
}
</style>
<style lang="scss">
.fixed-table-class {
  .el-table__fixed {
    height: 290px !important;
  }
}
</style>
